<template>
  <el-container>
    <el-main>
      <el-collapse v-model="activeNames">
        <el-collapse-item
          title="基本信息"
          name="1"
          style="padding-bottom: 0px !important"
        >
          <el-form
            ref="form"
            :model="formBasicData"
            label-width="80px"
            size="mini"
            :rules="rules"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="机构角色" prop="instRole">
                  <el-checkbox-group v-model="formBasicData.instRole">
                    <el-checkbox label="银行"></el-checkbox>
                    <el-checkbox label="保理公司"></el-checkbox>
                    <el-checkbox label="担保机构"></el-checkbox>
                    <el-checkbox label="证券公司"></el-checkbox>
                    <el-checkbox label="信托公司"></el-checkbox>
                    <el-checkbox label="保险公司"></el-checkbox>
                    <el-checkbox label="评估机构"></el-checkbox>
                    <el-checkbox label="基金管理公司"></el-checkbox>
                    <el-checkbox label="金融租赁公司"></el-checkbox>
                    <el-checkbox label="融资租赁公司"></el-checkbox>
                    <el-checkbox label="会计事务所"></el-checkbox>
                    <el-checkbox label="律师事务所"></el-checkbox>
                    <el-checkbox label="其他"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="机构编号">
                  <el-input
                    readonly
                    v-model="formBasicData.instId"
                    placeholder="机构编号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构名称" prop="instName">
                  <el-input
                    v-model="formBasicData.instName"
                    placeholder="机构名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构状态">
                  <el-input
                    v-model="formBasicData.instStatus"
                    placeholder="机构状态"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="统一社会信用代码">
                  <el-input
                    v-model="formBasicData.code"
                    placeholder="统一社会信用代码"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件有效期">
                  <el-input
                    type="text"
                    v-model="formBasicData.codeUseful"
                    placeholder="证件有效期"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="法定代表人">
                  <el-input
                    v-model="formBasicData.legalRep"
                    placeholder="法定代表人"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="主办部门">
                  <el-input
                    v-model="formBasicData.hostDept"
                    placeholder="主办部门"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="拜访次数">
                  <el-input
                    v-model="formBasicData.visitCount"
                    placeholder="拜访次数"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="来访次数">
                  <el-input
                    v-model="formBasicData.comCount"
                    placeholder="来访次数"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="创建日期">
                  <el-input
                    v-model="formBasicData.createDate"
                    placeholder="创建日期"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8"> </el-col>
              <el-col :span="8"> </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="注册地址">
                  <el-input
                    v-model="formBasicData.regAddr"
                    placeholder="注册地址"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="营业地址">
                  <el-input
                    v-model="formBasicData.bussAddr"
                    placeholder="营业地址"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <template>
                  <el-popconfirm
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定保存机构基本信息吗"
                    @confirm="saveBasicInfo"
                  >
                    <!-- <el-button slot="reference">删除</el-button> -->
                    <el-button slot="reference" size="small" style="width: 100%"
                      >保存</el-button
                    >
                  </el-popconfirm>
                </template>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="机构部门列表" name="2">
          <el-table
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '0px' }"
            :data="tableDepartmentData"
            border
            style="width: 100%; font-size: 10px"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60px"
            ></el-table-column>
            <el-table-column prop="instId" label="机构编号"></el-table-column>
            <el-table-column prop="deptName" label="机构部门">
            </el-table-column>
            <el-table-column prop="fmgr" label="主办融资经理">
            </el-table-column>
            <el-table-column prop="cfmgr" label="协办融资经理">
            </el-table-column>
            <el-table-column prop="note" label="备注"> </el-table-column>
            <el-table-column prop="" label="操作">
              <el-button type="text" size="small" width="100">编辑</el-button>
              <el-button type="text" size="small" width="100">删除</el-button>
            </el-table-column>
          </el-table>
          <div>
            <el-button
              size="small"
              @click="dialogFormVisible = true"
              style="width: 100%"
              >新增</el-button
            >
            <el-dialog
              title="新增机构部门列表编辑"
              :visible.sync="dialogFormVisible"
            >
              <el-form :model="formDepartmentData">
                <el-form-item label="机构编号" :label-width="formLabelWidth">
                  <el-input
                    v-model="formDepartmentData.instId"
                    autocomplete="off"
                    readonly
                  ></el-input>
                </el-form-item>
                <el-form-item label="机构部门" :label-width="formLabelWidth">
                  <el-input
                    v-model="formDepartmentData.deptName"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="主办融资经理"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="formDepartmentData.fmgr"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="协办融资经理"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="formDepartmentData.cfmgr"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input
                    v-model="formDepartmentData.note"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="adddep();dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 机构是否存在,2000存在,2001不存在
      isInst: "",
      // 生成的最新编号信息
      instLastId: "",
      dialogFormVisible: false,
      // 机构部门列表编辑-弹出对话框
      formDepartmentData: {
        instId: "ZJ00000003",
        deptName: "",
        fmgr: "",
        cfmgr: "",
        note: "",
      },
      formLabelWidth: "120px",
      activeNames: ["1", "2"],
      // fromBasicData 机构详细信息
      formBasicData: {
        instRole: [],
        instId: "",
        instName: "",
        instStatus: "意向机构",
        code: "",
        codeUseful: "",
        legalRep: "",
        hostDept: "资金投行部",
        visitCount: 0,
        comCount: 0,
        createDate: "",
        regAddr: "",
        bussAddr: "",
      },
      rules: {
        instRole: [
          { required: true, message: "请选择机构角色", trigger: "blur" },
        ],
        // 机构名称不能为空
        instName: [
          { required: true, message: "请输入机构名称", trigger: "blur" },
        ],
      },
      // tableDepartmentData 机构部门列表信息
      tableDepartmentData: [
        {
          instId: "ZJ00000005",
          deptName: "创投部",
          fmgr: "小红",
          cfmgr: "小明",
          note: "无",
        },
        {
          instId: "ZJ00000005",
          deptName: "创投部",
          fmgr: "小红",
          cfmgr: "小明",
          note: "无",
        },
        {
          instId: "ZJ00000005",
          deptName: "创投部",
          fmgr: "小红",
          cfmgr: "小明",
          note: "无",
        },
        {
          instId: "ZJ00000005",
          deptName: "创投部",
          fmgr: "小红",
          cfmgr: "小明",
          note: "无",
        },
      ],
    };
  },
  computed: {},
  methods: {
    adddep() {
      // 新增接口
      let that = this.formDepartmentData;

      this.$axios
        .post(`http://localhost:8001/department/insert`, {
          params: that,
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((result) => {
          console.log("新增部门成功");
          this.getTableInfo();
        })
        .catch((err) => {});
    },
     // 请求机构部门列表信息
    getTableInfo() {
      // let id = this.instLastId;
      console.log("请求机构部门列表信息......");
      this.$axios({
        method: "get",
        url: `http://localhost:8001/department/getAll?instId=ZJ00000003`,
        headers: {
          'Content-Type': 'application/json'
        },
      })
        .then((result) => {
          console.log(result.data.data.content);
          console.log("请求机构部门信息成功！");
          this.tableDepartmentData = result.data.data.content;

          // console.log(result.data.data.content[result.data.data.content.length -1].instId);
        })
        .catch((err) => {
          console.log("请求机构部门信息失败！" + err);
        });
    },
    // 获取今天日期
    getdatatime() {
      //默认显示今天
      // console.log(new Date());
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }

      let t = year + "-" + month + "-" + date;
      this.formBasicData.createDate = t;
      // console.log(t);
      // this.formBasicData.createDate = new Date();
    },
    //格式化机构编号
    formatZero(num, len) {
      if (String(num).length > len) return num;
      return "ZJ" + (Array(len).join(0) + num).slice(-len);
    },
    // 获取机构最新编号
    getIdInfo() {
      this.$axios({
        method: "get",
        url: "http://localhost:8001/institution/getAll",
      })
        .then((result) => {
          // console.log("请求机构编号信息成功！");
          let instId =
            result.data.data.content[result.data.data.content.length - 1]
              .instId;
          let num = instId.split("J");
          let newNum = parseInt(num[1]) + 1;
          this.instLastId = this.formatZero(newNum, 8);
          this.formBasicData.instId = this.formatZero(newNum, 8);
          thatInstId = this.formBasicData.instId;
          return thatInstId
        })
        .catch((err) => {
          console.log("请求机构编号信息失败！" + err);
        });
    },
    // 生成编号信息
    getInstId() {},
    // 保存按钮，保存基本信息
    // 判断新增还是修改保存
    saveBasicInfo() {
      console.log("触发保存方法！");
      // this.isInstNull();
      this.saveHttp();
    },

    // 发起网络保存请求
    saveHttp() {
      let instRole1 = this.formBasicData.instRole.toString();
      this.formBasicData.instRole = instRole1;
      console.log("发起新增保存操作");
      // this.$axios.post(`http://localhost:8001/institution/insertInst`, JSON.stringify(this.formBasicData)).then( res => console.log(res))
      this.$axios({
        url: "http://localhost:8001/institution/insertInst",
        method: "POST",
        data: this.formBasicData,
        headers: {
          "Content-Type": "application/json",
        },
      });
    },
   
    // 机构角色非空校验
    instRoleIsNull() {},
    // 判断是新增操作还是修改操作
    isAddOrRevise() {
      let that = this.formBasicData.instId;
      if (that == "") {
        // console.log("isAdd");
        this.getIdInfo();
        this.getdatatime();
      } else {
      }
    },
  },
  created() {
    this.getIdInfo();
    this.getdatatime();
  },
  mounted() {

    this.isAddOrRevise();
    this.getTableInfo();
  },
};
</script>

<style scoped>
.el-container .el-main {
  padding: 0 !important;
}
</style>